<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
let globalData = {}
// ----
const form = reactive({
  id: 0,
  tabName: 'market_payIntend',
  // ----
  name: '',
  remark: '',
  key: ''
})

/* ---- */
const layer = ref()
const layerLoading = ref()

/* ---- */
const getFormInfo = () => {
  // --获取信息--
  const newItems = forSys.filter((item) => { return String(item.name) === form.tabName })
  if (Number(newItems.length) === 1) {
    form.id = newItems[0].id
    proxy.$Myfun.getJsonData(newItems[0].value, (resJson) => {
      const RJData = resJson[0] || {}
      globalData = RJData
      // ----
      RJData.list.some((item) => {
        if (Number(item.id) === Number(proxy.$route.query.id)) {
          if (item.text) form.name = item.text
          if (item.remark) form.remark = item.remark
          if (item.key) form.key = item.key
        }
      })
    })
  }
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
// ----
const subform = async () => {
  if (Number(form.name.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '填写合作意向')
    return false
  }
  if (Number(form.key.length) === 0) {
    proxy.$Myfun.forToast(layer.value, 'open', '填写关键字段')
    return false
  }
  // ----
  const newItems = globalData.list || []
  if (proxy.$route.query.id) {
    newItems.some((item) => {
      if (Number(item.id) === Number(proxy.$route.query.id)) {
        item.text = form.name
        item.remark = form.remark
        item.key = form.key
      }
    })
  } else {
    globalData.maxId = Number(globalData.maxId) > 0 ? Number(globalData.maxId) + 1 : 1
    newItems.push({
      id: globalData.maxId,
      text: form.name,
      remark: form.remark,
      key: form.key
    })
  }
  // ----
  globalData.list = newItems
  // ----
  const forValue = JSON.stringify(globalData)
  // ----
  let forType = 'post'
  let forUrl = 'system/create'
  let forData = {
    name: form.tabName,
    value: forValue,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  if (Number(form.id) > 0) {
    forType = 'patch'
    forUrl = 'system/update?id=' + form.id
    forData = {
      value: forValue,
      // ----
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData) proxy.$router.back()
}
const goback = () => { proxy.$router.back() }

/* ---- */
onMounted(() => {
  getFormInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>合作意向</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.name"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.name"></em></transition>
          </div>
        </li>
        <li>
          <div class="form-are xw-radius-3">
            <h1>备注说明</h1>
            <p><textarea class="tarea-H3" placeholder="" v-model.trim="form.remark"></textarea></p>
          </div>
        </li>
        <li>
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>关键字段</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="form.key"/></p>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="form.key"></em></transition>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>